

const ChatWindow = ({clickHandler}: { clickHandler: () => void }) => {


    return (


            <div id={"container-chat"} >

                <div className={"row m-0 p-3"}>

                    <div className={"col-6 ps-0"}>
                        <span
                            className="badge d-flex align-items-center p-1 pe-2 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-pill" id={"badge-chat"}>
    <img className="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="" />Daniel
  </span>
                    </div>
                    <div className={"col-6 d-flex justify-content-end align-content-end pe-0"}>
                        <button className="btn btn-toolbar" type="button" id="button-close" onClick={clickHandler}>

                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                                 className="bi bi-x" viewBox="0 0 13 13">
                                <path
                                    d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
                            </svg>
                        </button>
                    </div>


                </div>

                <div id={"container-messages"}>

                    <div id={"right-message"}>
                        <p className={"m-0"}>Hello! How can I help you?</p>

                    </div>




                    <div id={"left-message"}>
                        <p className={"m-0"}>Hello!</p>

                    </div>



                </div>

                <div className={"p-3"} id={"chat-control"}>

                    <div className="input-group ">
                        <input type="text" className="form-control rounded-start-5" placeholder="Your message"
                               aria-label="Recipient's username" id={"chat-input"}/>
                        <button className="btn btn-outline-secondary rounded-end-5" type="button" id="button-send">

                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor"
                                 className="bi bi-caret-right-fill" viewBox="0 0 18 18">
                                <path
                                    d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/>
                            </svg>
                        </button>
                    </div>

                </div>

            </div>
    )
}

export default ChatWindow